<template>
  <div class="login">
    <section class="box">
      <div class="head">欢迎登录</div>
      <div class="content">
        <div class="country-select">
          国家/地区<span>中国（+86）</span>
        </div>
        <ul>
          <li :class="{'hue':iponehue}">
            <label :class="{'hue':iponehue}">手机号</label>
            <el-input
              v-model="parm.mobile"
              clearable
              @focus="iponehue = true"
              @blur="parm.mobile == '' ? iponehue = false : iponehue = true">
            </el-input>
          </li>
          <li class="yzcode" :class="{'hue':yzcode}">
            <label :class="{'hue':yzcode}">验证码</label>
            <el-input v-model="parm.code"
                      @keyup.enter.native="handleSubmit"
                      clearable
                      @focus="yzcode = true"
                      @blur="parm.code == '' ? yzcode = false : yzcode = true">
            </el-input>
            <a href="javascript:;" @click="getCode">{{codename}}</a>
          </li>
        </ul>
        <div class="btn">
          <el-button type="primary" round size="medium" @click.native="handleSubmit">登录</el-button>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import {login} from '@/api/user'
  import {mapActions, mapState} from 'vuex'

  export default {
    data() {
      return {
        iponehue: false,
        yzcode: false,
        parm: {
          mobile: '', //手机号码
          code: '', //短信验证码 66666
          clientId: '', //会话ID
          countryCode: '' //手机国际区域码
        },
        timer: null,
        codename: '获取验证码',
        count: ''
      }
    },
    computed: {
      ...mapState({
        token: state => state.user.token,
      })
    },
    methods: {
      ...mapActions([
        'handleLogin',
        'getUserInfo',
        'sendCode'
      ]),
      async getLogin() {
        let data = await login(this.parm)
        console.log(data)
      },
      // 获取验证码
      getCode() {
        if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(this.parm.mobile))) {
          this.$notify.error({
            title: '错误',
            message: '不是完整的11位手机号或者正确的手机号'
          });
          return false;
        }
        let _this = this
        const time_count = 60

        if (this.codename == '获取验证码') {

          this.sendCode(this.parm.mobile).then(data => {

            if (data.code != 0) {
              this.$notify.error({
                title: '错误',
                message: data.message
              });
              return
            }
            this.$notify({
              title: '成功',
              message: '发送成功',
              type: 'success'
            });
          })

        }
        if (!this.timer) {
          this.count = time_count
          this.timer = setInterval(() => {
            if (_this.count > 0 && _this.count <= time_count) {
              _this.count--
              _this.codename = "(" + _this.count + ")秒后重试"
            } else {
              clearInterval(_this.timer)
              _this.codename = "获取验证码"
              _this.timer = null
            }
          }, 1000)
        }

      },
      // 登录
      handleSubmit() {
        if (!(/^1[3|4|5|8][0-9]\d{8}$/.test(this.parm.mobile))) {
          this.$notify.error({
            title: '错误',
            message: '不是完整的11位手机号或者正确的手机号'
          });
          return false;
        } else if (this.parm.code == '') {
          this.$notify.error({
            title: '错误',
            message: '请输入验证码！'
          });
          return false;
        }
        let _this = this
        // 临时传参
        this.parm.countryCode = "86"
        this.parm.clientId = this.parm.mobile + Math.random(1)
        this.handleLogin(this.parm).then(data => {
          // 进入会话页
          if (data.code != 0) {
            this.$notify.error({
              title: '错误',
              message: data.message
            });
            return
          }
          this.$notify({
            // title: '成功',
            message: '登录成功',
            type: 'success'
          });
          _this.$router.push({path: '/chat'})
        })
      }
    },
    mounted() {

    }
  }
</script>

<style lang="stylus">
  .login {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background #fff url("../../assets/img/login_bg.png") no-repeat;
    background-size: cover;

    .box {
      width 375px;
      height 442px;
      box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
      background: #fff;
      border-radius: 12px;
      margin-bottom: 150px

      .head {
        height 96px;
        line-height 96px;
        background url("../../assets/img/bg-1@2x.png") no-repeat;
        background-size cover;
        padding-left 22px;
        font-size 28px;
        color #fff;
      }

      .content {
        padding 45px 24px 0 24px;
        font-size 17px;

        .country-select {
          color #333;

          span {
            margin-left 9px;
            color #4972B8;
          }
        }

        ul {
          margin-top 16px;

          li {
            margin-bottom 1px;
            position relative;
            border-bottom 1px solid #EBEBEB;

            label {
              position absolute;
              top 20px;
              font-size 17px;
              z-index 1;
              color #BFBFBF;
              left 10px;
              transition all 1s;
            }

            label.hue {
              top 8px;
              transform scale(0.8);
            }

            span {
              top 12px;
            }

            .el-input--suffix .el-input__inner {
              border none;
              margin-top 24px;
              color #333333;
              font-size 17px;
            }
          }

          li.hue {
            border-bottom 1px solid #327BFA;
          }

          li.yzcode {
            .el-input {
              width 220px;
            }

            a {
              color #4972B8;
            }
          }
        }

        .btn {
          margin-top 41px;

          .el-button--medium.is-round {
            width 100%;
            padding: 16px 20px;
            border-radius 25px;
            font-size 17px;
          }
        }
      }
    }
  }
</style>
